<template>
  <div class="install-proclamation" :style="{ height: $store.oj.systemParams.screenHeight * 0.8 + 'px' }">
    <div class="i-header">
      <div class="i-h-title"><i class="iconfont icon-gonggao"></i>公告管理</div>
    </div>
    <div class="i-search">
      <n-button class="i-s-btn" size="small" round type="success" @click="show = true"><i
          class="iconfont icon-tianjia"></i>发布公告</n-button>
      <div>
        <el-select v-model="typeVal" class="i-select" placeholder="公告状态" style="width: 100px">
          <el-option v-for="item in statusVal" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-input class="i-s-input" placeholder="搜索公告标题" round size="small" v-model="searchVal">
          <template #suffix>
            <i class="iconfont icon-sousuo" @click="updateSearchParams"></i>
          </template>
        </el-input>
      </div>
    </div>
    <div class="i-table">
      <el-table :data="proclamationList.records" size="small" stripe>
        <el-table-column prop="id" label="ID" align="center"></el-table-column>
        <el-table-column prop="title" label="标题" align="center"></el-table-column>
        <el-table-column prop="creatorName" label="发布人" align="center"></el-table-column>

        <el-table-column prop="publishTime" label="发布时间" align="center" min-width="150">
          <template #default="scoped">
            <div class="i-t-time">
              <div class="time" v-show="scoped.row.publishTime !== null">
                {{ scoped.row.publishTime }}
              </div>
              <div class="time" v-show="scoped.row.publishTime === null">
                --------------
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="outTime" label="结束时间" align="center" min-width="150">
          <template #default="scoped">
            <div class="i-t-time">
              <div class="time" v-show="scoped.row.outTime !== null">
                {{ scoped.row.outTime }}
              </div>
              <div class="time" v-show="scoped.row.outTime === null">
                --------------
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="是否可见" align="center">
          <template #default="scoped">
            <el-switch v-model="scoped.row.showAnnouncement" :active-value="true" :inactive-value="false"
              @change="isShowAnnouncement(scoped.row)" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120">
          <template #default="scoped">
            <div class="i-t-comparation">
              <div>
                <el-tooltip content="更新公告" placement="top">
                  <n-button class="nbtn" size="tiny" type="info" @click="showUpdateAnnouncement(scoped.row)"><i
                      class="iconfont icon-bianji"></i></n-button>
                </el-tooltip>
                <n-popconfirm positive-text="确认" negative-text="取消" @positive-click="delAnnouncement(scoped.row.id)">
                  <template #trigger>
                    <n-tooltip trigger="hover">
                      <template #trigger>
                        <n-button class="nbtn" size="tiny" type="error"><i class="iconfont icon-shanchu"></i></n-button>
                      </template>
                      删除
                    </n-tooltip>
                  </template>
                  确认删除公告？
                </n-popconfirm>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="i-footer">
      <el-pagination small layout="sizes, prev, pager, next" :page-count="parseInt(proclamationList.pages)"
        v-model:current-page="pageNum" v-model:page-size="pageSize" @current-change="changePage"
        @size-change="changeSize" :page-sizes="[10, 20, 30]" />
    </div>
    <el-drawer v-model="show" size="100%" direction="ttb" :auto-focus="false" :show-close="false">
      <template #header>
        <div class="header">
          <div class="header-title">
            <el-form>
              <el-form-item prop="title">
                <el-input id="title" class="title" v-model="title" placeholder="此处输入公告标题..." size="large" />
              </el-form-item>
            </el-form>
          </div>
          <div class="doing">
            <div class="is-top" v-if="$store.oj.userData.authLevel !== 0">
              <span>是否可见:</span>
              <n-switch v-model:value="isShow" size="small" />
            </div>
            <n-button type="error" size="tiny" @click="
              show = false;
            setUp();
            ">
              <template #icon>
                <i class="iconfont icon-quxiao"></i>
              </template>
              取消发布
            </n-button>
            <n-button type="primary" size="tiny" @click="addAnnouncement" v-show="!isUpdate">
              <template #icon>
                <i class="iconfont icon-fabu-copy1-copy"></i>
              </template>
              发布公告
            </n-button>
            <n-button type="primary" size="tiny" @click="updateAnnouncement" v-show="isUpdate">
              <template #icon>
                <i class="iconfont icon-fabu-copy1-copy"></i>
              </template>
              更新公告
            </n-button>
          </div>
        </div>
      </template>
      <div>
        <div class="proclama-content">公告内容</div>
        <markdown-vue ref="content" :detailContent="content" :height="'340px'"></markdown-vue>
      </div>
      <div class="post-time">
        <div>开始时间:</div>
        <el-tooltip content="默认立即发送" placement="top">
          <div class="time">
            <el-date-picker v-model="startTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择发送时间" :default-time="new Date()"
              :disabled-date="disabledDateFn" />
          </div>
        </el-tooltip>

        <div>结束时间:</div>
        <el-tooltip content="默认永久公告" placement="top">
          <div class="time">
            <el-date-picker v-model="endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择发送时间" :disabled-date="disabledDateFn" />
          </div>
        </el-tooltip>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import markdownVue from "@/components/ojComponents/markdown/markdown.vue"

import {
  addAnnouncementAPI,
  getAnnouncementAPI,
  isShowAPI,
  delAnnouncementAPI,
  updateAnnouncementAPI,
} from "@/api/adminAPI/adminAPI.js"
import { ElMessage } from "element-plus"

export default {
  data () {
    return {
      searchVal: "",
      proclamationList: {},
      show: false,
      content: "",
      title: "",
      isShow: true,
      startTime: "",
      endTime: "",
      pageNum: 1,
      pageSize: 20,
      deboundTime: null,
      isUpdate: false,
      id: null,
      typeVal: "",
      statusVal: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "0",
          label: "未开始",
        },
        {
          value: "1",
          label: "已开始",
        },
        {
          value: "2",
          label: "已结束",
        },
      ],
    }
  },
  watch: {
    searchVal () {
      if (this.$store.oj.userData.authLevel === 0) {
        ElMessage.error("无此权限")
        return
      }
      if (this.deboundTime) {
        clearTimeout(this.deboundTime)
      }
      this.deboundTime = setTimeout(() => {
        this.getAnnouncementAPI()
      }, 300)
    },
    typeVal () {
      if (this.$store.oj.userData.authLevel === 0) {
        ElMessage.error("无此权限")
        return
      }
      if (this.deboundTime) {
        clearTimeout(this.deboundTime)
      }
      this.deboundTime = setTimeout(() => {
        this.getAnnouncementAPI()
      }, 300)
    },
  },

  methods: {
    //重置数据
    setUp () {
      this.show = false
      this.startTime = ""
      this.endTime = ""
      this.title = ""
      this.isShow = true
      this.content = ""
      this.$refs.content.clearContent()
    },
    //用于日期时间选择器中的限制选择日期的用法
    disabledDateFn (date) {
      if (date.getTime() < new Date().getTime()) {
        return true
      }
      return false
    },
    //改变页数，请求分页
    changePage (page) {
      if (this.deboundTime) {
        clearTimeout(this.deboundTime)
      }
      this.deboundTime = setTimeout(() => {
        this.pageNum = page
        this.getAnnouncementAPI()
      }, 300)
    },
    changeSize (size) {
      if (this.$store.oj.userData.authLevel === 0) {
        ElMessage.error("无此权限")
        return
      }
      if (this.deboundTime) {
        clearTimeout(this.deboundTime)
      }
      this.deboundTime = setTimeout(() => {
        this.pageSize = size
        this.getAnnouncementAPI()
      }, 300)
    },
    delAnnouncement (id) {
      if (this.$store.oj.userData.authLevel === 0) {
        ElMessage.error("无此权限")
        return
      }
      if (this.deboundTime) {
        clearTimeout(this.deboundTime)
      }
      this.deboundTime = setTimeout(() => {
        this.delAnnouncementAPI(id)
      }, 300)
    },
    //将要更新数据展示上去
    showUpdateAnnouncement (row) {
      this.content = row.content
      this.title = row.title
      this.isShow = row.showAnnouncement
      this.startTime = row.publishTime !== null ? row.publishTime : ""
      this.endTime = row.outTime !== null ? row.outTime : ""
      this.show = true
      this.isUpdate = true
      this.id = row.id
    },
    //防抖进行更新公告
    updateAnnouncement () {
      if (this.$store.oj.userData.authLevel === 0) {
        ElMessage.error("无此权限")
        return
      }
      if (this.title === "") {
        ElMessage.error("请输入标题")
        return
      }
      if (this.$refs.content.content === "") {
        ElMessage.error("请输入内容")
        return
      }
      if (
        new Date(this.startTime).getTime() > new Date(this.endTime).getTime()
      ) {
        ElMessage.error("开始时间不能大于结束时间")
        return
      }
      if (this.deboundTime) {
        clearTimeout(this.deboundTime)
      }
      this.deboundTime = setTimeout(() => {
        this.updateAnnouncementAPI()
      }, 300)
    },
    //防抖去改变公告是否可见
    isShowAnnouncement (row) {
      if (this.$store.oj.userData.authLevel === 0) {
        ElMessage.error("无此权限")
        return
      }
      if (this.deboundTime) {
        clearTimeout(this.deboundTime)
      }
      this.deboundTime = setTimeout(() => {
        this.isShowAPI(row)
      }, 300)
    },
    //异步防抖去添加公告
    addAnnouncement () {
      if (this.$store.oj.userData.authLevel === 0) {
        ElMessage.error("无此权限")
        return
      }
      if (this.title === "") {
        ElMessage.error("请输入标题")
        return
      }
      if (this.$refs.content.content === "") {
        ElMessage.error("请输入内容")
        return
      }
      if (
        new Date(this.startTime).getTime() > new Date(this.endTime).getTime()
      ) {
        ElMessage.error("开始时间不能大于结束时间")
        return
      }
      if (this.deboundTime) {
        clearTimeout(this.deboundTime)
      }
      this.deboundTime = setTimeout(() => {
        this.addAnnouncementAPI()
      }, 300)
    },
    async delAnnouncementAPI (id) {
      const data = [id]
      await delAnnouncementAPI(data).then((res) => {
        if (res.data.code === 200) {
          this.getAnnouncementAPI()
          ElMessage.success("删除成功")
        }
      })
    },
    async isShowAPI (row) {
      let data = new FormData()
      data.append("id", row.id)
      data.append("isShow", row.showAnnouncement)
      await isShowAPI(data).then((res) => {
        if (res.data.code === 200) {
          ElMessage.success("修改成功")
          this.getAnnouncementAPI()
        }
      })
    },
    async updateAnnouncementAPI () {
      const data = {
        title: this.title,
        content: this.$refs.content.content,
        isShow: this.isShow,
        publishTime: this.startTime,
        outTime: this.endTime,
        id: this.id,
      }
      await updateAnnouncementAPI(data).then((res) => {
        if (res.data.code === 200) {
          this.getAnnouncementAPI()
          ElMessage.success("修改成功")
          this.setUp()
        }
      })
    },
    async addAnnouncementAPI () {
      const data = {
        title: this.title,
        content: this.$refs.content.content,
        showAnnouncement: this.isShow,
        publishTime: this.startTime,
        outTime: this.endTime,
      }
      await addAnnouncementAPI(data).then((res) => {
        if (res.data.code === 200) {
          this.getAnnouncementAPI()
          ElMessage.success("发布成功")
          this.setUp()
        }
      })
    },
    //查询公告
    async getAnnouncementAPI () {
      const data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        like: this.searchVal,
        status: this.typeVal,
      }
      await getAnnouncementAPI(data).then((res) => {
        if (res.data.code === 200) {
          this.proclamationList = res.data.data
        }
      })
    },
  },
  components: {
    markdownVue,
  },
  mounted () {
    if (this.$store.oj.userData.authLevel === 0) {
      ElMessage.error("无此权限")
      return
    } else {
      this.getAnnouncementAPI()
    }
  },
}
</script>

<style lang="less" scoped>
.install-proclamation {
  margin: auto;
  width: 96%;
  padding: 10px;
  margin-top: 10px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 12px 12px 50px #d9d9d9, -12px -12px 50px #ffffff;
  display: flex;
  flex-direction: column;

  .i-header {
    display: flex;
    padding-bottom: 10px;

    .i-h-title {
      height: 30px;
      line-height: 30px;
      font-size: 20px;
      font-weight: 600;
      color: #555;
      display: flex;
      text-align: center;

      .iconfont {
        margin: auto 0;
        font-weight: 700;
        font-size: 28px;
        height: 30px;
      }
    }
  }

  .i-search {
    display: flex;
    justify-content: space-between;
    height: 30px;
    line-height: 30px;
    margin: 10px 0 0 0;
    padding-bottom: 10px;
    border-bottom: 2px solid @lineColor;

    .i-s-input {
      height: 30px;
      line-height: 30px;
      width: 60%;
    }

    .i-select {
      margin-right: 10px;
    }

    .i-s-btn {
      width: 120px;
      margin: auto 20px;
    }
  }

  .i-table {
    width: 100%;
    height: 92vh;
    margin: 10px auto 0 auto;

    .i-t-time {
      display: flex;
      flex-direction: column;

      .time {
        color: black;
      }
    }

    .i-t-comparation {
      display: flex;

      div {
        margin: 0 auto;
      }

      .nbtn {
        margin: auto 2px;
      }
    }
  }

  .i-footer {
    margin: auto auto 0 auto;
    display: flex;
    justify-content: center;
  }
}

::v-deep(.el-drawer) {
  --n-body-padding: 30px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}

::v-deep(.el-drawer__header) {
  display: block;
  padding: 10px 0 20px 0;
  border-bottom: none;

  .header {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    height: 60px;
    border-bottom: 1px solid rgba(240, 240, 240, 1);

    .doing {
      width: 22%;
      display: flex;

      .n-button {
        margin: 0 5px;
      }

      .is-top {
        margin: 0 5px;

        span {
          font-size: 0.8875em;
          margin-right: 5px;
        }
      }
    }

    .header-title {
      min-width: 78%;
      margin-right: 15px;
      margin-top: 20px;
    }
  }
}

::v-deep(.header-title .el-input__wrapper) {
  box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
  cursor: text;
  padding: 7px 15px;
  font-size: 16px;

  .el-input__inner {
    font-weight: bold;
    cursor: text !important;
  }
}

::v-deep(.el-drawer__body) {
  --el-drawer-padding-primary: 0px 20px;

  .proclama-content {
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    width: 10%;
    font-weight: 550;
    color: #5e5e5e;
  }

  .post-time {
    margin-top: 10px;
    display: flex;
    align-items: center;

    div {
      margin-right: 10px;
      font-size: 16px;
      line-height: 40px;
      font-weight: 550;
      color: #5e5e5e;
    }
  }

  .bottom {
    padding: 5px 10px;
    border: 1px solid rgba(240, 240, 240, 1);
    display: flex;

    .bottom-category {
      padding-left: 12px;

      .n-button {
        height: 32px;
        border-radius: 16px;
        background-color: rgba(0, 10, 32, 0.05);
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        cursor: pointer;
        font-size: 12px;
        color: rgba(38, 38, 38, 0.75);
      }
    }

    .bottom-tag {
      display: flex;
      align-items: center;
      margin-left: 20px;
      color: rgba(116, 121, 116, 0.89);
      font-size: 16px;

      .el-tag {
        background-color: rgba(255, 255, 255, 1);
        border: none;
        margin: 0 5px;

        ::v-deep(.el-icon) {
          color: rgba(255, 255, 255, 1);
          --el-tag-hover-color: rgba(39, 81, 89, 0.26);
        }
      }

      .tag {
        font-size: 12px;
        font-weight: 400;
        color: rgba(38, 38, 38, 0.75);
        height: 24px;
        border-radius: 12px;
        padding: 3px 8px;
        border: 1px solid rgba(0, 10, 32, 0.05);
        background-color: rgba(0, 10, 32, 0.05);
        cursor: pointer;
        transition: color 1s ease-out;
      }

      .active-tag {
        color: rgba(255, 255, 255, 1);
        background-color: rgba(86, 203, 107, 1);
        background: linear-gradient(to right,
            rgba(86, 203, 107, 0.7),
            rgba(86, 203, 107, 0.8),
            rgba(86, 203, 107, 0.9));
        border-color: rgba(86, 203, 107, 1);
      }
    }
  }
}

::v-deep(.el-select .el-input) {
  --el-border-radius-base: 8px;
}

::v-deep(.el-input__wrapper) {
  padding: 0px 11px;
}
</style>
